<template>
  <div class="page page-child">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title">
              <p>文件管理</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
            <div class="fileList">
              <van-tabs v-model="active" animated swipeable title-active-color="#62c9f8" color="#62c9f8"
                        title-inactive-color="#333" line-width="5.5rem">
                <van-tab :title="item_title" v-for="(item_title,title_index) in title" :key="title_index">
                  <van-cell-group>
                    <template v-if="filelist[title_index].length>0">
                      <van-cell v-longtap="operateFile"  v-for="(item_file,item_index) in filelist[title_index]" :key="item_index"
                                :title="item_file.name" :label="item_file.createTime" :icon="baseUrl+ item_file.icon"
                                border @click="linkTo(item_file.name,item_file.data,item_index)">
                        <van-icon class="iconfont" class-prefix="icon" :name="isOperate?(item_file.isCheck ? 'checked1' : 'circle'):'fanhui'"></van-icon>
                      </van-cell>
                    </template>
                    <template v-else>
                      <div class="null_box">
                        <div class="null_icon">
                          <span class="icon iconfont icon-wendang"></span>
                        </div>
                        <div class="null_title">没有文件</div>
                      </div>
                    </template>
                  </van-cell-group>
                </van-tab>
              </van-tabs>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layOpen">
      <van-dialog
        v-model="addFolderLayShow"
        title="新建文件夹"
        size="large"
        show-cancel-button
        :before-close="isReName?reNameDiag:operateDiag"

        :confirmButtonColor="confirmButtonColor"
      >
        <van-cell-group>
          <van-field v-model="newFolderName" placeholder="新建文件夹"></van-field>
        </van-cell-group>
      </van-dialog>
    </div>
    <AddDrag v-if="!isOperate" :list="addList" toolGroupHeight="115px" @addFile="addFun"></AddDrag>
    <div class="operateTool" v-if="isOperate">
      <van-tabbar>
        <van-tabbar-item @click="cancleOperate">
          <van-icon class="iconfont" class-prefix="icon" name="guanbi" tag="div"></van-icon>
          <span>取消</span></van-tabbar-item>
        <van-tabbar-item @click="reName">
          <van-icon class="iconfont" class-prefix="icon" name="chongmingming" tag="div"></van-icon>
          <span>重命名</span></van-tabbar-item>
        <van-tabbar-item @click="deleteSelect">
          <van-icon class="iconfont" class-prefix="icon" name="delete2" tag="div"></van-icon>
          <span>删除</span></van-tabbar-item>
        <van-tabbar-item>
          <van-icon class="iconfont" class-prefix="icon" name="filetransfer_px" tag="div"></van-icon>
          <span>移动到</span></van-tabbar-item>
        <van-tabbar-item @click="selectAll">
          <van-icon class="iconfont" class-prefix="icon" name="quanxuan" tag="div"></van-icon>
          <span>全选</span></van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
  // @ --> 全局src
  import AddDrag from '@/components/publics/AddDrag'
  import util from '@/assets/util/util'
  import Vue from 'vue'
  export default {
    name: 'workPage',
    data() {
      return {
        active: 0
        ,title: [
          "我的收藏",
          "我的文件",
          "企业网盘"
        ]
        ,addFolderLayShow: false  //弹窗控制
        ,newFolderName: '' //新建文件夹名字
        ,confirmButtonColor: '#eee'
        ,isOperate:false  //文件操作状态
        ,isAllChecked:false //是否全选
        ,isReName:false  //重命名状态
        ,addList: [
          {
            title: '文件夹',
            imgSrc: '/static/images/document_man/addfolder.png'
          }
          , {
            title: '文件',
            imgSrc: '/static/images/document_man/upload.png'
          }
        ]
        ,filelist: [      //文件管理 文件列表
          [     //我的收藏
            {
              fileSize: '0KB',
              name: '合同',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: [
                {
                  fileSize: '0KB',
                  name: '简历1',
                  createTime: '2019-06-13 17:48',
                  icon: '/static/images/document_man/folder.png',
                  fileType: 'folder',
                  data: [
                    {
                      fileSize: '0KB',
                      name: 'test',
                      createTime: '2019-06-13 17:48',
                      icon: '/static/images/document_man/folder.png',
                      fileType: 'folder',
                      data: []
                    },
                    {
                      fileSize: '6.64KB',
                      name: 'avatar.jpg',
                      createTime: '2019-06-13 17:48',
                      icon: '/static/images/document_man/avatar.jpg',
                      fileType: 'image',
                      data: []
                    }
                    , {
                      fileSize: '0KB',
                      name: '工作流',
                      createTime: '2019-06-13 17:48',
                      icon: '/static/images/document_man/folder.png',
                      fileType: 'folder',
                      data: [
                        {
                          fileSize: '0KB',
                          name: 'last3',
                          createTime: '2019-06-13 17:48',
                          icon: '/static/images/document_man/folder.png',
                          fileType: 'folder',
                          data: [
                            {
                              fileSize: '0KB',
                              name: 'last2',
                              createTime: '2019-06-13 17:48',
                              icon: '/static/images/document_man/folder.png',
                              fileType: 'folder',
                              data: [
                                {
                                  fileSize: '0KB',
                                  name: 'last1',
                                  createTime: '2019-06-13 17:48',
                                  icon: '/static/images/document_man/folder.png',
                                  fileType: 'folder',
                                  

                                  data: [
                                    {
                                      fileSize: '0KB',
                                      name: 'last',
                                      createTime: '2019-06-13 17:48',
                                      icon: '/static/images/document_man/folder.png',
                                      fileType: 'folder',
                                      data: []
                                    }
                                  ]
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }, {
                  fileSize: '0KB',
                  name: '简历2',
                  createTime: '2019-06-13 17:48',
                  icon: '/static/images/document_man/folder.png',
                  pid: '0',
                  id: '0',
                  fileType: 'folder',
                  data: []
                }
              ]
            }
            , {
            fileSize: '0KB',
            name: '工作流',
            createTime: '2019-06-13 17:48',
            icon: '/static/images/document_man/folder.png',
            fileType: 'folder',
            data: [
              {
                fileSize: '0KB',
                name: 'demo1',
                createTime: '2019-06-13 17:48',
                icon: '/static/images/document_man/folder.png',
                fileType: 'folder',
                data: []
              }, {
                fileSize: '0KB',
                name: 'demo2',
                createTime: '2019-06-13 17:48',
                icon: '/static/images/document_man/folder.png',
                fileType: 'folder',
                data: []
              }
              , {
                fileSize: '6.64KB',
                name: 'avatar2.jpg',
                createTime: '2019-06-13 17:48',
                icon: '/static/images/document_man/avatar.jpg',
                fileType: 'image',
                data: []
              }
            ]
          }
            , {
            fileSize: '6.64KB',
            name: 'avatar.jpg',
            createTime: '2019-06-13 17:48',
            icon: '/static/images/document_man/avatar.jpg',
            fileType: 'image',
            data: []
          }
            , {
            fileSize: '0KB',
            name: '城市天际线',
            createTime: '2019-06-13 17:48',
            icon: '/static/images/document_man/folder.png',
            fileType: 'folder',
            data: []
          }
            , {
            fileSize: '3KB',
            name: 'vocabav.bat',
            createTime: '2019-06-13 17:48',
            icon: '/static/images/document_man/icon_weizhi.png',
            fileType: 'unkown',
            data: []
          }
            , {
            fileSize: '4.2MB',
            name: 'We Are The Brave',
            createTime: '2019-06-13 17:48',
            icon: '/static/images/document_man/file_music.png',
            fileType: 'music',
            data: []
          },
            {
              fileSize: '0KB',
              name: '工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '学习',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '测试',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '测试',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '测试',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '测试',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '测试',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '测试',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '测试',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },

          ],
          [  //我的文件
            {
              fileSize: '0KB',
              name: '工作',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {

              fileSize: '0KB',
              name: '学习',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            }
          ],
          [    //企业网盘
            {
              fileSize: '0KB',
              name: '内部资料1',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            },
            {
              fileSize: '0KB',
              name: '内部资料2',
              createTime: '2019-06-13 17:48',
              icon: '/static/images/document_man/folder.png',
              fileType: 'folder',
              data: []
            }
          ]
        ]
        ,baseUrl: this.NET.BASE_URL  //文件访问地址头部 http://localhost:8080
      }
    }
    ,methods: {
      goBack() {
        this.$router.push({path: '/Work'});
      }
      //添加文件夹 文件
      , addFun(e) {
        if (parseInt(e.srcElement.dataset.index) === 0) {
          // 添加文件夹
          this.addFolderLayShow = true;
        } else {

        }
      }
      //长按操作
      , operateFile() {
        this.filelist[this.active].forEach((item,index)=>{
          item.isCheck = false;
        });
        this.isOperate = true;
      }
      ,linkTo(fileName,fileData,index){
        if(!this.isOperate){
          this.$router.push('FileItem?title='+fileName+'&data='+JSON.stringify(fileData))
          //  文件操作状态选择
        }else{
          //    let newItem = ;
          this.filelist[this.active][index].isCheck = ! this.filelist[this.active][index].isCheck;
          Vue.set(this.filelist[this.active],index,this.filelist[this.active][index]);
        }
      }
      //新建文件夹弹出层
      , operateDiag(action, done) {
        if (action === 'confirm' && this.newFolderName.length > 0) {
          this.filelist[this.active].unshift({
            fileSize: '0KB',
            name: this.newFolderName,
            createTime: util.getCurrTime().YMDHMin,
            icon: '/static/images/document_man/folder.png',
            fileType: 'folder',
            data: []
          });
          this.newFolderName = '';
        }
        //关闭弹窗
        done();
      }
      //  删除选中
      ,deleteSelect(){
        let selectNum=0;
        this.filelist[this.active].forEach(item=>{
          if(item.isCheck){
            selectNum++;
          }
        });
        if(selectNum<=0){
          this.$toast('请选择文件！');
        }else {
          this.$dialog.confirm({
            title: '确认删除'
            ,message: '您确定要删除选中文件吗？'
            ,confirmButtonColor:'red'
          }).then(() => {
            this.isOperate=false;
            let obj = {
              delete:()=>{
                this.filelist[this.active].forEach((item,index)=>{
                  if(item.isCheck){
                    this.filelist[this.active].splice(index,1);
                    obj.delete();
                  }
                })
              }
            };
            obj.delete();

          }).catch(()=>{})
        }
      }
      //取消操作
      ,cancleOperate(){
        this.isOperate=false;
        this.isAllChecked=false;
        this.filelist[this.active].forEach(item=>{
          item.isCheck=false;
        })
      }
      //全选
      ,selectAll(){
        this.filelist[this.active].forEach((item,index)=>{
          // let newItem = item;
          // newItem.isCheck = ;
          item.isCheck = !this.isAllChecked;
          Vue.set(this.filelist[this.active],index,item);
        });
        this.isAllChecked = !this.isAllChecked;
      }
      //  重命名
      ,reName(){
        this.isReName=true;
        let selectNum=0;
        let currIndex = null;
        this.filelist[this.active].forEach((item,index)=>{
          if(item.isCheck){
            selectNum++;
            currIndex = index;
          }
        });
        if(selectNum>1){
          this.$toast('选中文件过多！');
        }else if(selectNum<=0){
          this.$toast('请选择文件！');

        }else {
          this.addFolderLayShow=true;
          this.newFolderName = this.filelist[this.active][currIndex].name;
        }
      }
      ,reNameDiag(action,done){
        if(action==='confirm' && this.newFolderName.length>0){
          let currIndex = null;
          this.filelist[this.active].forEach((item,index)=>{
            if(item.isCheck){
              currIndex = index;
            }
          });
          this.filelist[this.active][currIndex].name = this.newFolderName;
          Vue.set(this.filelist[this.active],currIndex,this.filelist[this.active][currIndex]);
        }
        this.newFolderName = '';
        // 清除所有选中
        this.filelist[this.active].forEach((item,index)=>{
          item.isCheck = false;
          Vue.set(this.filelist[this.active],index,item);
        });
        //取消操作状态
        this.isOperate=false;
        done();
      }
    }
    ,components:{AddDrag}
    , watch: {
      //  监听新建文件夹 修改确认按钮颜色
      newFolderName(val, oldVal) {
        if (val.length > 0) {
          this.confirmButtonColor = "#62c9f8"
        } else {
          this.confirmButtonColor = "#eee"
        }
      }
    }
    ,created() {
//			let _this = this;
//			this.$post("/app/post/AppSysUserTokenController/queryMenuBySession", {}).then((json) => {
//				if(json.returnCode == 0) {
//					_this.list = json.rows;
//					_this.baseUrl = this.NET.BASE_URL;
//				} else {
//					this.$message({
//						message: json.returnMessage
//					});
//				}
//			});
    }
  }
</script>

<style scoped="scoped">
  #work {
    width: 100%;
    height: 100%;
  }

  /*主体部分*/
  .weui-tab__panel_bd {
    height: calc(100% - 45px);
    width: 100%;
    float: left;
    background-color: rgb(252, 251, 251);
  }
</style>
<style>
  .van-cell__left-icon, .van-cell__right-icon {
    min-width: 2rem;
    height: 2rem;
    font-size: 16px;
    line-height: 2rem;
    align-self: center;
  }

  .van-icon__image {
    width: 2rem;
    height: 2rem;
  }

  .van-tabs__content .van-tabs__track {
    height: calc(100vh - 44px);
    /*overflow-y: scroll;*/
  }

  .van-tab__pane, .van-tab__pane-wrapper {
    overflow-y: scroll;
  }
  .operateTool .icon {
    color: #fff;
    position: relative;
    margin-bottom: 5px;
    font-size: 18px;
  }

  .operateTool .van-tabbar-item--active {
    color: #fff;
  }

  .operateTool .van-tabbar {
    background-color: #62c9f8;
  }

  .operateTool .van-tabbar-item__text {
    text-align: center;
    color: #fff;
  }

  .filelist .van-cell-group {
    padding-bottom: 100px;
    min-height: calc(100vh - 44px);
  }
  .fileList .van-cell__value{
    display: flex;
    flex-direction: row-reverse;
  }
  .fileList .icon{
    align-self:center;
  }
  .fileList .icon-checked1{
    color: #62c9f8;
  }
  .van-dialog{
    border-radius: 10px;
  }
  .null_box {
    width: 100vw;
    height: calc(100vh - 44px);
  }

  .null_icon {
    padding-top: 10rem;
    text-align: center;
  }

  .null_icon .icon {
    font-size: 6rem;
    color: #bbb;
  }

  .null_title {
    text-align: center;
    font-size: 1rem;
    color: #bbb;
    letter-spacing: 0.2rem;
  }
</style>
